{% extends "base.html" %}
{% block title %}编辑学员信息 - {{ student.real_name }} - 乒乓球培训管理系统{% endblock %}
{% block page_title %}编辑学员信息{% endblock %}

{% block extra_css %}
<style>
.edit-form-container {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 2rem;
    margin-bottom: 2rem;
}

.form-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #007bff;
    display: inline-block;
}

.preview-avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #e9ecef;
    transition: border-color 0.3s ease;
}

.preview-avatar:hover {
    border-color: #007bff;
}

.upload-area {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    background: #f8f9fa;
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-area:hover {
    border-color: #007bff;
    background: #e7f3ff;
}

.upload-area.dragover {
    border-color: #28a745;
    background: #d4edda;
}

.form-floating .form-control:focus,
.form-floating .form-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

.btn-action {
    min-width: 120px;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.status-preview {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    text-align: center;
}

.status-active {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-inactive {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

@media (max-width: 768px) {
    .edit-form-container {
        padding: 1.5rem;
        margin: 1rem;
        border-radius: 10px;
    }

    .btn-action {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 返回按钮 -->
    <div class="mb-3">
        <a href="{{ url_for('students.detail', id=student.id) }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> 返回学员详情
        </a>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="edit-form-container">
                <div class="text-center mb-4">
                    <h3 class="mb-1">编辑学员信息</h3>
                    <p class="text-muted">学员：{{ student.real_name }}</p>
                </div>

                <form method="POST" enctype="multipart/form-data" id="editForm">
                    {{ form.hidden_tag() }}

                    <!-- 基本信息 -->
                    <div class="form-section">
                        <h5 class="section-title">
                            <i class="bi bi-person-lines-fill me-2"></i>基本信息
                        </h5>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    {{ form.real_name(class="form-control") }}
                                    {{ form.real_name.label(class="form-label") }}
                                    {% if form.real_name.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.real_name.errors %}
                                            <small>{{ error }}</small>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    {{ form.phone(class="form-control") }}
                                    {{ form.phone.label(class="form-label") }}
                                    {% if form.phone.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.phone.errors %}
                                            <small>{{ error }}</small>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-8">
                                <div class="form-floating mb-3">
                                    {{ form.email(class="form-control") }}
                                    {{ form.email.label(class="form-label") }}
                                    {% if form.email.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.email.errors %}
                                            <small>{{ error }}</small>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-floating mb-3">
                                    {{ form.age(class="form-control") }}
                                    {{ form.age.label(class="form-label") }}
                                    {% if form.age.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.age.errors %}
                                            <small>{{ error }}</small>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    {{ form.gender(class="form-select") }}
                                    {{ form.gender.label(class="form-label") }}
                                    {% if form.gender.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.gender.errors %}
                                            <small>{{ error }}</small>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    {{ form.campus_id(class="form-select") }}
                                    {{ form.campus_id.label(class="form-label") }}
                                    {% if form.campus_id.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.campus_id.errors %}
                                            <small>{{ error }}</small>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 头像上传 -->
                    <div class="form-section">
                        <h5 class="section-title">
                            <i class="bi bi-image me-2"></i>头像设置
                        </h5>

                        <div class="row align-items-center">
                            <div class="col-md-4 text-center">
                                <div class="mb-3">
                                    {% if student.photo_url %}
                                    <img src="{{ student.photo_url }}" alt="当前头像" class="preview-avatar" id="currentAvatar">
                                    {% else %}
                                    <div class="preview-avatar mx-auto bg-light d-flex align-items-center justify-content-center" id="currentAvatar">
                                        <i class="bi bi-person-fill fs-1 text-muted"></i>
                                    </div>
                                    {% endif %}
                                    <p class="text-muted mt-2">当前头像</p>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="upload-area" onclick="document.getElementById('photoInput').click()">
                                    <i class="bi bi-cloud-upload fs-2 text-muted"></i>
                                    <p class="mt-2 mb-0">点击选择新头像</p>
                                    <small class="text-muted">支持 JPG、PNG、GIF 格式，建议尺寸 300x300</small>
                                    {{ form.photo(style="display: none;", id="photoInput") }}
                                </div>
                                {% if form.photo.errors %}
                                <div class="text-danger mt-2">
                                    {% for error in form.photo.errors %}
                                        <small>{{ error }}</small>
                                    {% endfor %}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- 状态和备注 -->
                    <div class="form-section">
                        <h5 class="section-title">
                            <i class="bi bi-gear me-2"></i>状态设置
                        </h5>

                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label">学员状态</label>
                                <div class="mb-3">
                                    {{ form.status(class="form-select", onchange="updateStatusPreview()") }}
                                    {% if form.status.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.status.errors %}
                                            <small>{{ error }}</small>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                                <div class="status-preview status-active" id="statusPreview">
                                    <i class="bi bi-check-circle me-1"></i>活跃学员
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    {{ form.notes(class="form-control", style="height: 120px") }}
                                    {{ form.notes.label(class="form-label") }}
                                    {% if form.notes.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.notes.errors %}
                                            <small>{{ error }}</small>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="text-center">
                        <button type="submit" class="btn btn-primary btn-action me-2">
                            <i class="bi bi-check-lg me-2"></i>保存修改
                        </button>
                        <a href="{{ url_for('students.detail', id=student.id) }}" class="btn btn-outline-secondary btn-action">
                            <i class="bi bi-x-lg me-2"></i>取消
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 状态预览更新
function updateStatusPreview() {
    const statusSelect = document.getElementById('id-status');
    const statusPreview = document.getElementById('statusPreview');

    if (statusSelect.value === 'active') {
        statusPreview.className = 'status-preview status-active';
        statusPreview.innerHTML = '<i class="bi bi-check-circle me-1"></i>活跃学员';
    } else {
        statusPreview.className = 'status-preview status-inactive';
        statusPreview.innerHTML = '<i class="bi bi-x-circle me-1"></i>不活跃学员';
    }
}

// 头像预览
document.getElementById('photoInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        // 验证文件类型
        const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
        if (!allowedTypes.includes(file.type)) {
            alert('请选择 JPG、PNG 或 GIF 格式的图片');
            this.value = '';
            return;
        }

        // 验证文件大小 (5MB)
        if (file.size > 5 * 1024 * 1024) {
            alert('图片大小不能超过 5MB');
            this.value = '';
            return;
        }

        // 预览图片
        const reader = new FileReader();
        reader.onload = function(e) {
            const currentAvatar = document.getElementById('currentAvatar');
            if (currentAvatar.tagName === 'IMG') {
                currentAvatar.src = e.target.result;
            } else {
                // 创建新的img元素替换div
                const newImg = document.createElement('img');
                newImg.src = e.target.result;
                newImg.alt = '头像预览';
                newImg.className = 'preview-avatar';
                newImg.id = 'currentAvatar';
                currentAvatar.parentNode.replaceChild(newImg, currentAvatar);
            }
        };
        reader.readAsDataURL(file);
    }
});

// 拖拽上传
const uploadArea = document.querySelector('.upload-area');

uploadArea.addEventListener('dragover', function(e) {
    e.preventDefault();
    this.classList.add('dragover');
});

uploadArea.addEventListener('dragleave', function(e) {
    e.preventDefault();
    this.classList.remove('dragover');
});

uploadArea.addEventListener('drop', function(e) {
    e.preventDefault();
    this.classList.remove('dragover');

    const files = e.dataTransfer.files;
    if (files.length > 0) {
        document.getElementById('photoInput').files = files;
        document.getElementById('photoInput').dispatchEvent(new Event('change'));
    }
});

// 表单验证
document.getElementById('editForm').addEventListener('submit', function(e) {
    const realName = document.getElementById('id-real_name').value.trim();
    const phone = document.getElementById('id-phone').value.trim();

    if (!realName) {
        e.preventDefault();
        alert('请输入真实姓名');
        document.getElementById('id-real_name').focus();
        return;
    }

    if (!phone) {
        e.preventDefault();
        alert('请输入手机号');
        document.getElementById('id-phone').focus();
        return;
    }

    if (!/^1[3-9]\d{9}$/.test(phone)) {
        e.preventDefault();
        alert('请输入正确的手机号格式');
        document.getElementById('id-phone').focus();
        return;
    }

    // 显示提交状态
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>保存中...';
    submitBtn.disabled = true;

    // 防止重复提交
    setTimeout(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    }, 3000);
});

// 初始化状态预览
document.addEventListener('DOMContentLoaded', function() {
    updateStatusPreview();
});
</script>
{% endblock %}